<template>
    <div class="tpt-login">
        <h2>酒店预订系统</h2>
        <form>
            <input type="text" name="name" placeholder="用户名/手机号">
            <input type="password" name="password" placeholder="密码">
            <p>
                <a href="#" target="_blank"> &nbsp;&nbsp;立即注册</a>
                <a href="#" target="_blank"> 忘记密码&nbsp;&nbsp;</a>
            </p>
            <router-link to="/">
                <button>立即登录</button>
            </router-link>
        </form>
    </div>
</template>

<script>
export default {
  name: 'Login'
}
</script>
<style>
    body {
        background: url("../assets/background_01.jpg");
        width: 100%;
        height: 100%;
        position: fixed;
        background-size: 100% 100%;
    }

    .tpt-login {
        width: 360px;
        height: 360px;
        padding: 50px 30px;
        background: rgba(225, 225, 225, 0.6);
        border-radius: 8px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

    .tpt-login h2 {
        font-size: 35px;
        font-weight: 500;
        padding-bottom: 10px;
        text-align: center;
        color: #333;
    }

    .tpt-login input {
        width: 340px;
        padding: 0 10px;
        margin-bottom: 20px;
        height: 55px;
        line-height: 55px;
        border: 0;
        background: #f5f5f5;
        font-size: 16px;
        color: #666;
    }

    .tpt-login button {
        display: inline-block;
        height: 50px;
        line-height: 50px;
        width: 360px;
        background: #1e9fff;
        color: #fff;
        font-size: 16px;
        margin-top: 20px;
        border: none;
        border-radius: 2px;
        cursor: pointer;
    }

    .tpt-login p {
        font-size: 14px;
        color: #777;
    }

    .tpt-login a {
        float: right;
        font-size: 15px;
        color: #3581b9;
    }
</style>
